<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <style>
        img {
            width: 120px;
            height: 100px;
        }

        div {
            font-size: 20px;
            margin: 20px 0;
        }

        button {
            width: 70px;
            height: 30px;
        }
    </style>
</head>

<body>
    <h1>结算订单详情</h1>
    <table border="1px" cellspacing=0 style="width: 1000px;">
        <thead>
            <tr>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div></div>
    <button class="payBtn">支付</button>
    <button class="backBtn">返回首页</button>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 从本地存储中获取数据
        var settleGoods = JSON.parse(localStorage.getItem('Car'))
        // console.log(settleGoods);
        function data() {
            $('tbody').html('')
            settleGoods.forEach((item, index) => {
                $('tbody').append(
                    `<tr>
                        <th><img src="${item.photo}" alt=""></th>
                        <th>${item.name}</th>
                        <th>${item.price}</th>
                        <th>${item.number}</th>
                     </tr>`)
            });

        }
        data()

        // 显示总价
        var total = 0
        settleGoods.forEach(item => {
            total += item.price * item.number
        })
        $('div').html(`总价钱为：￥${total}`)

        // 支付
        $('.payBtn').click(() => {
            alert(`已支付${total}元，谢谢光临！`)
        })

        // 返回首页
        $('.backBtn').click(() => {
            location.assign('./购物车2.html')
            localStorage.clear()
        })
    </script>
</body>

</html>